<template>
  <article>
    <div class="picsbox">
    <LunBo></LunBo>
    <div class="toppic">
      <li v-for="item in right" :key="item.uid" @click="to(item.uid)">
      <el-card width="32%" :body-style="{ padding: '0px' }" shadow="hover" style="display:block;transition:all .5s ease; overflow:hidden">
        <img
          height="213px"
          :src="item.photoList[0]"
          class="image"
        />
        <h2>
          {{item.summary}}
        </h2>
      </el-card>
      </li>
    </div>
    </div>
    <div class="blank"></div>
      <List></List>
    <div class="sidebar">
      <Tag></Tag>
      <FollowMe></FollowMe>
      <SpecialRecommdendation></SpecialRecommdendation>
      <RecommdendationArticle></RecommdendationArticle>
    </div>
  </article>
</template>

<script>
import LunBo from "../components/lunbo";
import List from "../components/List";
import Tag from "../components/Tag";
import FollowMe from "../components/FollowMe"
import SpecialRecommdendation from "../components/SpecialRecommdendation"
import RecommdendationArticle from "../components/RecommdendationArticle"
export default {
  components: {
    LunBo,
    List,
    Tag,
    FollowMe,
    SpecialRecommdendation,
    RecommdendationArticle
  },
  data() {
    return {
      currentDate: new Date(),
      right:[]
    };
  },
  methods:{
to(blogUid) {
      let routeData = this.$router.resolve({
        path: "/info",
        query: { blogUid }
      });
      window.open(routeData.href, "_blank");
    }
  },
  mounted(){
    let session=window.localStorage
    let blogs=JSON.parse(session.getItem("blogs"))
    this.right.push(blogs[5])
    this.right.push(blogs[8])
  }
};
</script>

<style>
.toppic {
  width: 32%;
  float: right;
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>